
export default (app: any) => {
    app.directive('drag', {
        beforeMount(el: any, binding: any, Vnode: any, prevVnode: any) {
                console.log(1231);
            //头
            const dragHeaderEl = el.querySelector('.el-dialog__header')
            console.log(dragHeaderEl);
            
            // 拖拽的元素
            const dragDom = el.querySelector('.el-dialog')
            console.log(dragHeaderEl);
            
            // 添加样式
            dragHeaderEl.style.cssText += ';cursor:move;'
            dragDom.style.cssText += ';top:0px'

            // 获取原有dom元素的样式
            // currentStyle 兼容IE  ， getComputedStyle 兼容谷歌和火狐  
            // 两者都是为了获取  此dom元素的外部样式

            const sty = (() => {
                // 如果是ie 则 返回此函数

                if (window.document.currentStyle) {
                    return (dom: any, attr: any) => dom.currentStyle[attr]

                }
                // 如果不是ie ，则  返回下面的函数
                else {
                    return (dom: any, attr: any) => getComputedStyle(dom, false)[attr]
                }
            })()
                
            dragHeaderEl.onmousedown = (e) => {
                
             
                
                // 屏幕宽高
                const screenWidth = document.documentElement.clientWidth
                const screenHeight = document.documentElement.clientHeight

                // 盒子宽高
                const domWidth = dragDom.offsetWidth
                const domHeight = dragDom.offsetHeight
         
             // 鼠标在盒子里的坐标
             const disX = e.clientX -dragDom.offsetLeft
             const disY = e.clientY - dragDom.offsetTop
                
                
                // 边界
                const minX = 0
                const maxX = screenWidth - domWidth
                const minY = 0
                const maxY = screenHeight - domHeight

             
                
                
                let styl = sty(dragDom, 'left')
                let styt = sty(dragDom, 'top')
           
                
                

                // 如果 left 或top的值 是% ，则替换
                if (styl.includes('%')) {
                    styl = screenWidth * (+styl.replace(/%/g, '') / 100)
                    styt = screenHeight* (+styt.replace(/%/g, '') / 100)
                }
                else {
                    styl = styl.replace(/px/g, '')
                    styt = styt.replace(/px/g, '')
                }
                document.onmousemove = function (e) { 
               
                    
                    let left = e.clientX - disX
                    
                    
                    let top = e.clientY - disY
                    
                    
                    if (minX <= left && left <= maxX) { 
                        dragDom.style.left = left + 'px'
                       
                        
                    }
                    if (minY <= top && top <= maxY) {
                        dragDom.style.top = top + 'px'
               
                        
                     }

                }
                document.onmouseup = function (e) { 
                    document.onmousemove = null
                    document.onmouseup= null
                }
            }

        }

    })
    
}